<template>
	<page-meta>
		<navigation-bar :title="$tt('deviceDetail.subDeviceList')" background-color="#F1F3F9" front-color="#000000" />
	</page-meta>

	<view class="sub-device-wrap">
		<u-sticky>
			<view class="nav-bar">
				<view class="left-wrap">
					<view v-if="!isSearch" style="margin-right: 20rpx;">
						<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
					</view>
					<view v-else style="width: 100%;">
						<!-- #ifndef APP-NVUE -->
						<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
							v-model="queryParams.subDeviceName" :placeholder="$tt('group.inputContent')" shape="circle"
							@clear="handleClearSearch" clearable>
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
								v-model="queryParams.subDeviceName" :placeholder="$tt('group.inputContent')" shape="circle"
								@clear="handleClearSearch" clearable>
							<!-- #endif -->
								<template slot="prefix">
									<u-icon name="search" color="rgb(192, 196, 204)" size="26"
										@click="isSearch = false"></u-icon>
								</template>
								<template slot="suffix">
									<view style="display: flex; flex-direction: row; align-items: center;">
										<span
											style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
										<span
											style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
											@click="handleSearch">{{$tt('common.search')}}</span>
									</view>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="tab-wrap">
				<view class="tab-flex">
					<u-tabs :list="statusGroup" :scrollable="true" lineWidth="40" lineHeight="2" lineColor="transparent"
						:duration="100" :activeStyle="{ fontSize: '36rpx', color: '#3378FE', fontWeight: 'bold' }"
						@change="handleStatusChange">
					</u-tabs>
				</view>
			</view>
		</u-sticky>
		<view class="container-wrap">
			<view class="group-wrap">
				<u-cell-group :border="false">
					<view class="cell-wrap" v-for="(item,index) in list" :key="index" @tap="gotoDeviceDetail(item)">
						<u-cell :border="false" >
							<view slot="title" class="slot-title" >
								<u--image src="/static/common/device.png" radius="10" mode="aspectFill" width="96rpx"
									height="96rpx">
								</u--image>
								<view>
									<text class="cell-text">{{item.subDeviceName}}</text>
									<view class="cell-flex">
										<view class="cell-text">
											<u--text v-if="item.status == 3 && item.rssi >= '-55'" lines="1"
												prefixIcon="/static/common/wifi_4.png" iconStyle="margin-right:6rpx;"
												size="12" :text="statusTxt(item.status)"></u--text>
											<u--text
												v-else-if="item.status == 3 && item.rssi >= '-70' && item.rssi < '-55'"
												lines="1" prefixIcon="/static/common/wifi_3.png"
												iconStyle="margin-right:6rpx;" size="12"
												:text="statusTxt(item.status)"></u--text>
											<u--text
												v-else-if="item.status == 3 && item.rssi >= '-85' && item.rssi < '-70'"
												lines="1" prefixIcon="/static/common/wifi_2.png"
												iconStyle="margin-right:6rpx;" size="12"
												:text="statusTxt(item.status)"></u--text>
											<u--text
												v-else-if="item.status == 3 && item.rssi >= '-100' && item.rssi < '-85'"
												lines="1" prefixIcon="/static/common/wifi_1.png"
												iconStyle="margin-right:6rpx;" size="12"
												:text="statusTxt(item.status)"></u--text>
											<u--text v-else lines="1" prefixIcon="/static/common/wifi_0.png"
												iconStyle="margin-right:6rpx;" size="12" :text="statusTxt(item.status)">
											</u--text>
										</view>
										<view class="cell-text">
											<u--text lines="1" prefixIcon="/static/common/shadow_active.png"
												iconStyle="margin-right:6rpx;" size="12" v-if="item.isShadow == 1"
												:text="$tt('home.shadow')">
											</u--text>
											<u--text lines="1" prefixIcon="/static/common/shadow_disable.png"
												iconStyle="margin-right:6rpx;" size="12" v-else
												:text="$tt('home.shadow')"></u--text>
										</view>
									</view>
								</view>
							</view>
						</u-cell>
						<div class="share-wrap" style="margin: 30rpx 20rpx;" v-if="!profile.deptId"
							@click.stop="gotoShareList(item)">
							<u--image src="/static/common/share.png" mode="aspectFill" width="20"
								height="25rpx"></u--image>
						</div>
					</view>
				</u-cell-group>
			</view>
			<u-empty :show="total==0"></u-empty>
			<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize"
				:loading-text="$tt('scene.tryingToLoad')" :loadmoreText="$tt('scene.gentlyPullUp')"
				:nomoreText="$tt('scene.nothingLeft')" marginTop="20" />
		</view>
	</view>
</template>

<script>
	import {
		listSubDevice
	} from '@/apis/modules/device.js';

	export default {
		data() {
			return {
				isSearch: true,
				// 状态列表
				statusGroup: [{
						id: null,
						name: this.$tt('home.all')
					},
					{
						id: 3,
						name: this.$tt('home.onLine')
					},
					{
						id: 2,
						name: this.$tt('home.disabled')
					},
					{
						id: 4,
						name: this.$tt('home.offline')
					},
					{
						id: 1,
						name: this.$tt('home.notActive')
					}
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					parentClientId: '',
					status: null
				},
				list: [],
				total: 0,
				loadmoreStatus: 'loadmore', // 刷新和加载相关
				protocolCode: ''//协议
			};
		},
		onLoad(option) {
			this.protocolCode = option.protocolCode;
			this.queryParams.parentClientId = option.serialNumber;
		},
		created() {
			this.getDeviceDatas();
		},
		methods: {
			// 获取子设备列表
			async getDeviceDatas() {
				try {
					const res = await listSubDevice(this.queryParams);
					const {
						rows,
						total
					} = res;
					this.list = rows;
					this.total = total;
					return res;
				} catch (err) {
					console.error('数据加载失败:', err);
					throw err;
				}
			},
			// 跳转子设备详情
			gotoDeviceDetail(item) {
				console.log(item)
				const {
					subDeviceId,
				} = item;
				const protocolCode = this.protocolCode;
				uni.navigateTo({
					url: `/pagesA/home/device/index?deviceId=${subDeviceId}&protocolCode=${protocolCode}`
				});
			},
			//跳转分享列表
			gotoShareList(item) {
				const {
					subDeviceId,
					parentProductId,
					subDeviceName
				} = item;
				uni.$u.route('/pagesA/device/share/list', {
					deviceId: subDeviceId,
					productId: parentProductId,
					deviceName: subDeviceName
				});
			},
			handleSearch() {
				this.list = [];
				this.queryParams.pageNum = 1;
				this.getDeviceDatas();
			},
			handleClearSearch() {
				this.handleSearch();
			},
			// 状态改变事件
			handleStatusChange(item) {
				this.list = [];
				this.queryParams.status = item.id;
				this.queryParams.pageNum = 1;
				this.getDeviceDatas();
			},
			// 设备状态
			statusTxt(status) {
				let txt = '';
				switch (status) {
					case 1:
						txt = this.$tt('home.notActive');
						break;
					case 2:
						txt = this.$tt('home.disabled');
						break;
					case 3:
						txt = this.$tt('home.onLine');
						break;
					case 4:
						txt = this.$tt('home.offline');
						break;
				}
				return txt;
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.list = [];
				this.queryParams.pageNum = 1;
				// 模拟网络请求
				setTimeout(x => {
					this.getDeviceDatas();
					uni.stopPullDownRefresh();
				}, 1000);
			},

			// 上拉加载
			onReachBottom() {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = ++this.queryParams.pageNum;
				// 模拟网络请求
				setTimeout(() => {
					if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
						this.loadmoreStatus = 'nomore';
					} else {
						this.loadmoreStatus = 'loading';
						this.getDeviceDatas();
					}
				}, 1000);
			},
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.sub-device-wrap {
		.nav-bar {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 30rpx 28rpx;
			height: 74rpx;
			background: $uni-bg-color-grey;

			.left-wrap {
				flex: 1;
			}
		}

		.tab-wrap {
			padding: 0rpx 30rpx 28rpx;
			background: $uni-bg-color-grey;

			.tab-flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.container-wrap {
			padding-bottom: 54rpx;

			.group-wrap {
				width: 100%;
				margin: 0rpx 30rpx;

				.cell-wrap {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 2rpx 0;
					margin-right: 60rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					&:not(:first-child) {
						margin-top: 20rpx;
					}

					.slot-title {
						display: flex;
						flex-direction: row;
						align-items: center;

						.cell-text {
							font-size: 28rpx;
							margin-left: 20rpx
						}

						.cell-flex {
							display: flex;
							margin-top: 15rpx;
						}
					}
				}
			}
		}
	}
</style>